<template>
    <!-- 图片预览 -->
    <div class="imgbox" v-if="picture && props.showImg">
        <img :src="picture"/>
    </div>

    <!-- 文件上传 -->
    <el-upload
        :method="uploadOptions.method"
        :name="uploadOptions.name"
        :accept="uploadOptions.accept"
        :action="uploadOptions.action"
        :show-file-list="false"
        :headers="uploadOptions.headers"
        :data="uploadOptions.data"
        :on-success="uploadOptions.handleUploadSuccess"
        :on-error="uploadOptions.handleUploadError"
        :on-progress="uploadOptions.handleUploadProgress"
    >
        <!-- 添加图片 -->
        <div class="imgbox-up">
            <span><el-icon><Plus/></el-icon></span>
            <span class="info">必须jpg/png格式，大小 &lt;= 500KB</span>
        </div>

        <!-- 插槽 -->
        <slot></slot>
    </el-upload>
</template>

<script setup>

// 获取apiPath
const apiPath = ref(import.meta.env.VITE_BASE_API)

// 自定义v-model属性的时候处理（把组件中的数据传给调用者）
const props = defineProps({
    type: {
        type: String,
        default: "/local/uploadFile"
    },
    // 默认值
    modelValue: {
        type: [Object, String]
    },
    // 图片目录
    dir: {
        type: String,
        default: 'default'
    },
    // 是否显示图片
    showImg: {
        type: Boolean,
        default: true
    },
    // 图片预览数据
    picture: {
        type: String,
        default: Object
    }
})

// 封装文件上传的信息
const uploadOptions = reactive({
    // 文件上传的方式
    method: 'post',
    // 文件上传的类型
    name: 'file',
    // 文件上传的地址(接口地址)
    action: apiPath.value + props.type ,
    // 文件上传的类型
    accept: 'image/png,image/jpeg',
    // 设置文件上传的请求头部
    headers: {},
    // 文件上传携带的参数
    data: {
        'dir': props.dir
    },
    // 监听文件上传的成功
    handleUploadSuccess(res, file) {
        console.log('文件上传成功的数据是：', res)
        emits("update:modelValue", res.data.url)
    },
    // 监听文件上传的错误
    handleUploadError(err, file) {
        console.log('文件上传失败的原因是：', err)
    },
    // 监听文件上传的进度
    handleUploadProgress(evt, file) {
        console.log('文件上传的进度是：', evt.percent)
    },
})

// 导出组件的默认值
const emits = defineEmits(["update:modelValue"])

</script>

<style scoped lang="scss">
.imgbox {
    width: 200px;
    height: 140px;
    background: #fafafa;
    border: 1px solid #eee;
    margin-top: 10px;
    margin-right: 10px;
    display: flex;

    img {
        width: 100%;
        object-fit: contain;
    }
}

.imgbox-up {
    width: 200px;
    height: 140px;
    background: #fafafa;
    border: 1px solid #eee;
    margin-top: 10px;
    margin-right: 10px;
    display: flex;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    font-size: 32px;
    justify-content: center;
    color: #eee;

    .info {

        font-size: 12px;
        color: #999;
    }
}

.imgbox-up:hover {
    background: #ccc;
}
</style>
